<template>
	<view class="container">
		<uni-grid :column="4" :show-border="false" @change="change">
			<uni-grid-item v-for='(item,index) in list' :key='index' :index="index">
				<navigator :url="item.url" open-type="navigate">
					<view class="grid-item-box">
						<uni-icons :type="item.icol" size="35" />
						<text class='item'>{{item.name}}</text>
						<text class="ab">{{item.id}}</text>
					</view>
				</navigator>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '列表',
						icol: "list",
						url: "/pages/list/list"
					}, {
						name: '地图',
						icol: "map-pin-ellipse",
						url: "/pages/mapview/mapview"
					},
					{
						name: '增加面试',
						icol: "plus",
						url: "/pages/interview/interview"
					}, {
						name: '统计',
						icol: "smallcircle",
						url: "/pages/statistics/statistics"
					}, {
						name: '试题',
						icol: "compose",
						url: "/pages/mapview/mapview"
					}
				]
			}
		},
		methods: {
			change(e) {
				let index = e.detail
				// console.log(this.list[index])
				// console.log(this.list[index.index].url)
				let url = this.list[index.index].url
				uni.switchTab({
					url: url,
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.item {
		margin-top: 30rpx;
	}
</style>
